<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery UI Accordion - Customize icons</title>
	<link type="text/css" rel="stylesheet" href="CSS/jquery.ui.all.css">  
    <link href="CSS/demos.css" rel="stylesheet" type="text/css">
	
	
    <link type="text/css" href="CSS/jquery-ui-1.8.20.custom.css" rel="stylesheet" />	
	
	<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="Scripts/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="Scripts/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="Scripts/ui/jquery.ui.accordion.js"></script>
	<script type="text/javascript" src="Scripts/ui/jquery.ui.button.js"></script>	
	<script>
	//My Methods
	function getID(id)
	{
		alert(id);
	}
	function addItem(id,premise)
		{
			//记得把房屋的ID赋值给此元素的ID，这样点击的时候可以获取房屋的ID，然后飞行到指定的位置
			var Item=
			"<h3 id="+id+" onClick='getID("+id+")';><a>"+premise+"</a></h3>";			
			$("#accordion").append(Item);		
		}
	function addSubItem(area,price,type,location)
		{
			//记得把房屋的ID赋值给此元素的ID，这样点击的时候可以获取房屋的ID，然后飞行到指定的位置
			var Item="<div>	<ul> <li>面积："+area+"</li><li>价格："+price+"</li><li>户型："+type+"</li><li>地理位置："+location+"</li></ul></div>";			
			$("#accordion").append(Item);			
		}
		//End My Method
	
	
	$(function() {	
		//My part
			addItem(101,102);
			addSubItem(101,102,103,104);
			addItem(12,"xxx");
			addSubItem(101,"你是水","nihao",104);	
			addItem(13,"鼓楼区");
			addSubItem(101,"你是水","XXX","户型");	
		//End My part
			
		var icons = {
			header: "ui-icon-circle-arrow-e",			
			headerSelected: "ui-icon-circle-arrow-s"
		};
		$( "#accordion" ).accordion({
			icons: icons
		});
		$( "#toggle" ).button().toggle(function() {
			$( "#accordion" ).accordion( "option", "icons", false );
		}, function() {
			$( "#accordion" ).accordion( "option", "icons", icons );
		});	
		//My Part2
		/*
		$( "#accordion" ).click(function(){
		var xx=$(this).children().attr("id");
		var aa=$(this).children("h3").index();
		var dd=$("h3").attr("id");	
		alert(xx);
		});
		*/
		//End My Part2
			
	});
	
	</script>
</head>
<body>

<div class="demo">

<div id="accordion">
 <!--
	<h3 id="101" onClick=""><a href="#">台江区</a></h3>
   
	<div>
		<p style="color:#F00">你好</p>
	</div>

	<h3><a href="#">鼓楼区</a></h3>
	<div>
		<p>大家好</p>
	</div>

	<h3><a href="#">苍山区</a></h3>
	<div>		
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>

	<h3><a href="#">上街</a></h3>
	<div>我们都好 </p>
	</div>	
--> 
</div>

<button id="toggle">Toggle icons</button>

</div><!-- End demo -->
</body>
</html>
